<script lang="ts" setup>
import { Button } from 'ant-design-vue';
// 接收属性
const props = defineProps({
  modelValue: {
    type: String,
    default: '#000000', // 默认颜色
  },
});

// 定义事件
const emit = defineEmits(['update:modelValue']);

// 本地颜色状态
const color = ref(props.modelValue);
const colorInput = ref();
function handleInputChange(e: Event) {
  const target = e.target as HTMLInputElement;
  color.value = target.value;
}

// 监听颜色变化，通知父组件
watch(color, (newValue) => {
  emit('update:modelValue', newValue);
});

// 监听父组件的变化，更新本地状态
watch(
  () => props.modelValue,
  (newValue) => {
    color.value = newValue;
  },
);
</script>

<template>
  <Button :style="{ backgroundColor: color }" type="primary">
    <template #icon>
      <input
        ref="colorInput"
        :value="color"
        class="absolute inset-0 opacity-0"
        type="color"
        @input="handleInputChange"
      />
    </template>
  </Button>
</template>

<style lang="scss" scoped></style>
